<template>
	<div class="hello">
		<!-- 民族 -->
		<div class="nation group mg">
			<div class="group-title">
				民族
				<router-link to="/downloadapp">
					<div class="more">
						更多
						<img src="../assets/hyimg/more.png" alt="">
					</div>
				</router-link>
			</div>
			<div class="swiper-box">
				<van-swipe :show-indicators="false" :loop="false" class="nationSwipe" :width="165">
					<van-swipe-item v-for="(item,index) in nationWrap"  :key="index" class="nation-item"  > 
					<router-link to="/nationSong">
						<a href="#">
							<img :src="item.url" alt="">
							<h4>{{item.title}}</h4>
							<p>{{item.text}}</p>
						</a>
					</router-link>
					</van-swipe-item>
				</van-swipe>
			</div>
		</div>
		<!-- 说唱-->
		<div class="nation group">
			<div class="group-title">
				说唱
				<router-link to="/downloadapp">
					<div class="more">
						更多
						<img src="../assets/hyimg/more.png" alt="">
					</div>
				</router-link>
			</div>
			<div class="swiper-box">
				<van-swipe :show-indicators="false" :loop="false" class="nationSwipe" :width="165">
					<van-swipe-item v-for="(item,index) in rapWrap"  :key="index" class="nation-item"> 
					<router-link to="/rapSong">
						<a href="#">
							<img :src="item.url" alt="">
							<h4>{{item.title}}</h4>
							<p>{{item.text}}</p>
						</a>
					</router-link>
					</van-swipe-item>
				</van-swipe>
			</div>
		</div>
		<!-- 摇滚-->
		<div class="nation group">
			<div class="group-title">
				摇滚
				<router-link to="/downloadapp">
					<div class="more">
						更多
						<img src="../assets/hyimg/more.png" alt="">
					</div>
				</router-link>
			</div>
			<div class="swiper-box">
				<van-swipe :show-indicators="false" :loop="false" class="nationSwipe" :width="165">
					<van-swipe-item v-for="(item,index) in rockWrap"  :key="index" class="nation-item">
						<router-link to="/rockSong">
							<a href="">
								<img :src="item.url" alt="">
								<h4>{{item.title}}</h4>
								<p>{{item.text}}</p>
							</a>
						</router-link>
					</van-swipe-item>
				</van-swipe>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	name: 'HelloWorld',
	data(){
		return{
			nationWrap:[
				{
					url:require("../assets/hyimg/nationpic2.jpg"),
					title:'【建党节】不忘初心，坚定不移',
					text:'9首单曲',
				},	
			  	{
			  		url:require("../assets/hyimg/nationpic1.jpg"),
			  		title:'国庆节 | 听红歌，走四方',
			  		text:'19首单曲',
				},
			  	{
			  		url:require("../assets/hyimg/nationpic3.jpg"),
			  		title:'耳熟能详的戏曲名段',
			  		text:'20首单曲',
				},
			  	{
			  		url:require("../assets/hyimg/nationpic4.jpg"),
			  		title:'中国传统戏曲选段',
			  		text:'20首单曲',
				},
			  	{
			  		url:require("../assets/hyimg/nationpic5.jpg"),
			  		title:'国庆节 | 听红歌，走四方',
			  		text:'19首单曲',
				},
			  	{
			  		url:require("../assets/hyimg/nationpic6.jpg"),
			  		title:'传承戏曲～京剧',
			  		text:'20首单曲',
				},
				{
					url:require("../assets/hyimg/nationpic8.jpg"),
					title:'中国戏曲｜粤剧京剧名家精选',
					text:'16首单曲',
				},
			  	{
			  		url:require("../assets/hyimg/nationpic7.jpg"),
			  		title:'梅兰芳经典唱段',
			  		text:'16首单曲',
				},	
			],
		    rapWrap:[
		      	{
		      		url:require("../assets/hyimg/rappic2.jpg"),
		      		title:'热爱嘻哈的你一定要了解下日语说唱',
		      		text:'11首单曲',
				},
				{
					url:require("../assets/hyimg/rappic1.jpg"),
					title:'2020新说唱抢先听',
					text:'20首单曲',
				},
		      	{
		      		url:require("../assets/hyimg/rappic3.jpg"),
		      		title:'潮流玩家的出街playlist',
		      		text:'19首单曲' ,
				},
		      	{
		      		url:require("../assets/hyimg/rappic4.jpg"),
		      		title:'我天生脾气爆，不好惹',
		      		text:'21首单曲',
				},
		      	{
		      		url:require("../assets/hyimg/rappic5.jpg"),
		      		title:'酷并温柔着 | 你的眼睛让我迷了路',
		      		text:'19首单曲',
				},
		      	{
		      		url:require("../assets/hyimg/rappic6.jpg"),
		      		title:'嘻哈',
		      		text:'10首单曲',
				},
		      	{
		      		url:require("../assets/hyimg/rappic7.jpg"),
		      		title:'在嘻哈综艺中成功赢得热度的Rapper们',
		      		text:'29首单曲',
				},
		      	{
		      		url:require("../assets/hyimg/rappic8.jpg"),
		      		title:'华语嘻哈｜hiphop与湖湘气息的碰撞',
		      		text:'20首单曲',
				}		
		    ],
			rockWrap:[
				{
				 	url:require("../assets/hyimg/rockpic4.jpg"),
				 	title:'初夏成歌 | 独立摇滚风向标',
				 	text:'17首单曲',
				},
				{
				 	url:require("../assets/hyimg/rockpic1.jpg"),
				 	title:'华语嘻哈｜hiphop与湖湘气息的碰撞',
				 	text:'26首单曲',
				},
				{
				 	url:require("../assets/hyimg/rockpic2.jpg"),
				 	title:'家务进行曲（一）',
				 	text:'25首单曲',
				},
				{
				 	url:require("../assets/hyimg/rockpic3.jpg"),
				 	title:'乐队的夏天，与民同乐',
				 	text:'27首单曲',
				},
				{
				 	url:require("../assets/hyimg/rockpic5.jpg"),
				 	title:'摇滚不止，生生不息',
				 	text:'14首单曲',
				},
				{
				 	url:require("../assets/hyimg/rockpic6.jpg"),
				 	title:'热血摇滚丨赤子呓语一生梦',
				 	text:'23首单曲',
				},
				{
				 	url:require("../assets/hyimg/rockpic7.jpg"),
				 	title:'我天生脾气爆，不好惹',
				 	text:'21首单曲',
				},
				{
				 	url:require("../assets/hyimg/rockpic8.jpg"),
				 	title:'摇滚',
				 	text:'10首单曲',
				}		
			]
		}
	}
}
</script>

<style scoped>
</style>
